Превращаем существующее веб приложение в PWA
HTML-код
- Опубликовано: 25 дек 2022
- Рассматриваем наиболее простой способ превратить сущестующее WEB приложение, собираемое с помощью vitejs в прогрессивное веб приложение (PWA).
Исходные файлы проекта здесь:
github.com/easy-linux/vitejs/...
Документация и ссылки:
developer.mozilla.org/en-US/d...
vite-pwa-org.netlify.app/
developer.chrome.com/docs/wor...
realfavicongenerator.net/
Связанные видео:
• Web worker - как расп...
• Service worker - упра...
• О промисах простыми сл...
• О промисах простыми сл...
Сериал "Создание SPA приложения на чистом JS":
• SPA приложение на чист...
Видео по работе с vite.js:
• Знакомимся с Vitejs. П...
Полезные видео по настройке webpack:
Минимальная конфигурация - • Настраиваем сборку про...
Настройка горячей перезагрузки - • Webpack 5 Настройка го...
Настройка сборки проекта с подгрузкой файлов css/scss/изображений - • Webpack 5 Настройка сб...
Настройка сборки мультистраничного сайта - • Пример конфигурации сб...
Самый простой способ установить nodejs на Linux и Mac:
• Установка Nodejs на Li...
#easyit #javascript #js #vanillajs #jsworkers @EasyITChannel
Очень полезно, спасибо! всё завелось на последних версиях
супер! очень полезное видео! побольше бы таких видео про PWA, service-workers, и по web-worker тоже было бы неплохо)
Спасибо, на канале есть видео и по сервис воркеру и по веб воркеру, если вдруг не смотрели :) Можно будет сделать что-нибудь посложнее, для более глубокой проработки материала.
Спасибо за видео!
И Вам спасибо.
Спасибо за полезный ролик!!!
Рад что полезный. Спасибо за поддержку!
Спасибо за видео
Спасибо за просмотр и поддержку.
Добрый день. Подскажите пожалуйста, если проект создавался через CRA, то Vite так же можно подключить?
Добрый день.
Вообще без проблем. На одном довольно крупном проекте так и сделали. Но еще надо учесть, что за библиотеки у Вас используются. Могут возникнуть проблемы, например, с юнит тестами. У нас возникли и пришлось тесты переписать на vitest. Если для проекта не делали detach и не добавляли потом уж очень специфических плагинов-конфигов для webpack, то все должно пройти хорошо.
Спасибо за просмотр.
Добрый день. Спасибо за видео. Напишите, пожалуйста, а вот как отслеживать изменения в приложении на других платформах? Также хотелось бы уточнить информацию, по работе с данными не через сервер, а допустим в файловой системе, т.е сохранение данных, допустим для компа или все же лучше это делать через БД?
Добрый день. От того что мы превратили web приложение в PWA оно web приложением быть не перестало. Просто оно стало немного похоже на нативное приложение по поведению. Как и в любом web приложении, разделяемые данные нужно хранить на сервере. Тут обычная архитектура клиент - сервер, пусть даже клиентом выступает браузер. Веб приложение сильно ограничено в части работы с файловой системой. Причина - безопасность. Если есть желание написать практически полноценное приложение на JS - посмотрите на Electron, на канале есть видео.
Это клад,
Спасибо за поддержку :)
Спасибо за видео! Но у меня вопрос. При запуске http-server у меня 2 адреса - локальный и внутренней сети. На компьютере, если захожу через локальный, я могу поставить себе приложение, но через запуск внутренней сети нет такой опции (список sw пуст и манифест не видит sw, плюс пишет, что загрузка из незащищенного источника). Однако, через моб. устройство я могу подключиться через внутреннюю сеть и поставить себе на главный экран свое PWA. Почему так происходит?
Хороший вопрос!
Требования к pwa приложению (полноценному) следующие:
1. необходимо использовать протокол https
2. должен быть минимально, но правильно сконфигурированный манифест файл (иконки, имя...)
3. сервер воркер должен быть в наличии и загружаться с того же хоста что и манифест файл.
Нарушение любого из этих требований не гарантирует работоспособность PWA.
Есть исключение, чтобы приложение можно было тестировать. Это работа с localhost или если устройство с браузером находится в той же самой подсети, что и сервер.
Если сеть локальная, но подсеть не совпадает (например, на сервере адрес 192.168.1.100/24, а на устройстве - 192.168.2.50/24, то работать не будет.
@@EasyITChannel здравствуйте ещё раз. Возникла проблемка. Если собираю и запускаю через http-server как PWA, то получается мелкий масштаб. Но если через команду npm run dev (vite) то всё отображается корректно. Не совсем понимаю, в чем может быть проблема. К проекту подключена сторонняя библиотека vuetify.
А как это «через http-server как PWA»? Разницы быть не должно. Нужно выполнить npm run build и затем полученные после билда файлы выложить в корень http сервера. Так делаете?
@@EasyITChannel если через run dev то манифест не видит sw , а если через http то и с манифестом и с sw всё ок, но отображается мелко почему-то. А сгенерированные файлы надо куда то перекидывать? У меня они в папке dist лежат.
Dist каталог это должен быть корень web сервера. Маленький масштаб скорее всего потому что не настроен мета-тег viewport.
Вопрос, не по теме, но по Vite(предположительно, так все поломалось именно после его подключения). Искала в сети ответ на вопрос, как оказалось, очень частый у новичков. Ответ дают очень непонятный для нового в этом деле человека) Вопрос: создала простой проект create-react-app, закачала его на Vercel. Все работает идеально. Используется react-router 6.4 для переключения между страниц. Решила подключить vite, чтобы посмотреть что это вообще такое. Теперь приложение выдает ошибку 404 при перезагрузке дочерних страниц. "/" - ошибки нет, "/contacts" или "/about" - ошибка 404. Как я поняла, не настроен redirect. На сервере настроить его не дает. Надо что-то менять, чтоб отдавать index.html со всех маршрутов. Но что и как? Было бы здорово посмотреть видео на эту тему.
Заранее прошу прощения, если вопрос глупый 😅
Это довольно странно. Я лично переводил несколько крупных проектов с CRA на vite. В деплое вообще ничего менять не пришлось, все решилось на уровне скриптов в package.json. Но у нас нормальный взрослый CI, билд приложения, энвайроменты, все работает в докере под nginx и там есть настройка «все запросы переводить на index.html”. Использовался бесплатный Vercel? Сделаем. Должно с vite работать, если с CRA работает.
Не нужно стесняться (бояться) задавать «глупые» вопросы. Когда не можешь в чем-то разобраться по неопытности или недостатку знаний это нормально. Гораздо хуже когда без вопросов начинаешь что-то делать, теряешь кучу времени и потом все приходится переделывать. Еще пол-беды если самому ;)
Вопрос вполне нормальный, я ответа прямо сейчас не знаю, с Vercel никогда не работал, но разберусь - к гадалке не ходи ;)
@@EasyITChannel О, здоров было бы еще про nginx посмотреть! Да, Vercel бесплатный.
@@EasyITChannel К сожалению, русское айти сообщество беспощадно, не все(!!!), но в в своем большинстве. Если какой-то вопрос возникает, то лучше посмотреть на англо-говорящем ресурсе. Даже stackoverflow русский и английский кардинально разнятся.
Добрый день!
Спасибо за видеоролик! 🎉
Люди, подскажите пожалуйста, возможно ли сделать PWA не всего приложения, а только определенных страниц? Например у меня есть 5 вкладок я хочу что бы при оффлайне работали и кэшировались только 2 страницы.
Сейчас реализован сервис воркер который перехватывает запросы на сервер и берет файлы из кэша, но например при переключении на другую вкладку ошибки, так как страницы в кэше нет, и не знаю как закэшировать только часть страниц с возможностью по ним переходить оффлайн а по остальным онлайн
Спасибо 🫶
Добрый день.
Сделать так, конечно, можно. Нужно всего лишь в обработчике запроса проверять к какому URL идёт обращение и принимать решение что делать - обращаться к кэшу или серверу.
@@EasyITChannel
Автор, большое спасибо за ваши ответы! 🙏🏻 Даже когда видео уже год 😀
Моя сложность в том, что я понимаю что можно кэшировать файлы, например, картинки, но что бы кэшировать страницы, ведь нужно кэшировать статику, это брать весь бандл и кэшировать все приложение, оно большое, когда мне нужно всего две вкладки из этого бандла, то есть закэшировать часть бандла, наверно 🧐
Извините за глупые вопросы, впервые в PWA.
Кеширование файлов работает на уровне URL. Т.е. нужно принять решение о том кешировать конкретный URL или нет. И проверка выполняется именно по URL. В данном видео используется плагин vite-plugin-pwa, который автоматически генерит воркер с функционалом, подходящим для большинства приложений. Минимум настроек.
Если нужно какое-то супер кастомное поведение, то сервис воркер можно написать и самостоятельно вручную. Это не то чтобы запредельно сложно.
Нужно написать несколько обработчиков событий. Минимум два. Для событий install и fetch. Первое событие - какие файлы поместить в кеш изначально. Второе - для реализации необходимой стратегии уже при выполнении запроса. Тут можно кешировать не только файлы (бандлы), но и запросы. Как-то так.
уважаемый Easy IT помогите пожалуйста после сборки npm build вот такая ошибка
warnings
One of the glob patterns doesn't match any files. Please remove or fix the following: {
"globDirectory": "C:\\Users\\Админ\\Desktop\\pwa2\\build",
"globPattern": "**/*.{js,css,html}",
"globIgnores": [
"**/node_modules/**/*",
"sw.js",
"workbox-*.js"
]
}
что нужно поправить где
Добрый день.
Ваша ошибка находится в строке globDirectory
Укажите отностиельный путь, а не абсолютный и не используйте обратный слэш в пути к каталогу.
Должно выглядеть как-то так:
globDirectory: 'build/'
Т.е. нужно верняться к той версии, которая и была изначально в моей версии.
так же что-то вызывает сомнение наличие опции globIgnores. Такое ощущение, что она тут лишняя.
Очень много воды. Например, тот же момент, где "а вот на этой версии я не знаю, работает или нет, но я укажу ту, на которой все работало..." 5:42
И таких моментов куча на протяжении всего видео. Это все можно было вырезать
Сколько людей столько мнений. Можно было вырезать, но я посчитал полезным оставить. Это, так сказать, авторский замысел :)
Спасибо за просмотр и обратную связь.
@@EasyITChannel пожалуйста. Без негатива, если что